<template>
    	<div class="lists" v-if="form.index>0" v-on:click="choise(form.index)"  v-bind:class="form.current">
            <Row :gutter="16" class="list">
                <ICol span="12" class="text" v-if="form.title">
                    {{form.title}}
                </ICol>
                <ICol span="12" class="text" v-else>
                    标题
                </ICol>
                <ICol span="12" class="img">
                    <img v-if="form.pic" v-bind:src="form.pic">
                    <Icon v-else type="md-photos" style="line-height: 70px;font-size: 24px;"></Icon>
                </ICol>
                <div class="control">
                    <span v-on:click.stop="down(form.index)"><Icon type="md-arrow-down" v-show="form.index!=form.length-1"></Icon></span>
                    <span v-on:click.stop="up(form.index)"><Icon  type="md-arrow-up"></Icon></span>
                    <span v-on:click.stop="del(form.index)"><Icon type="md-trash" class="del"></Icon></span>
                </div>
            </Row>
    	</div>
        <div class="first" v-else v-on:click="choise(form.index)" v-bind:class="form.current">
            <Row style="height:120px;padding:10px;">
                <ICol span="24" class="img">
                    <img v-if="form.pic" v-bind:src="form.pic">
                    <Icon v-else type="md-photos" style="line-height: 110px;font-size: 40px;"></Icon>
                </ICol>
                <div class="text" v-if="form.title">{{form.title}}</div>
                <div class="text" v-else>标题</div>
                <div class="control">
                    <span v-on:click="down(form.index)" v-show="form.length>1 "><Icon type="arrow-down"></Icon></span>
                </div>
            </Row>
        </div>
</template>
<script>
    import {Row,Col,Icon} from 'view-design';
	
	export default{
		components:{
            Row,
            'ICol':Col,
            Icon,
        },
        props: {
            form: {
                type : Object,
                required : true,
            },
            choise :{
                type : Function,
                required : true,
            },
            down :{
                type : Function,
                required : true,
            },
            up :{
                type : Function,
                required : true,
            },
            del :{
                type : Function,
                required : true,
            },
        },
        methods:{
            
        }
	}
</script>
<style>
    .current{border: 1px solid #43b548 !important;}

    .first,.lists{cursor:pointer;border: 1px solid #FFFFFF;}

    .first {height: 120px;overflow: hidden;}
    .first .img{background: #c0c0c0;width:100%;height: 100%;text-align: center;}
    .first img{width: 100%;height: 100%;}
    .first .text{position: absolute; height: 25px; bottom: 10px; width: 172px; background: #403d3d; opacity: 0.8; color: #ffffff; line-height: 25px; text-indent: 10px;overflow:hidden;font-size: 14px;word-wrap: break-word;}

    .lists {height: 100px;overflow: hidden;}
    .lists .list{height: 100%;padding: 10px;border-bottom:1px solid #e7e7eb;}
    .lists .text{height: 35px;overflow: hidden;word-wrap: break-word;}
    .lists img{width: 78px;height: 78px;margin-left: -8px;}
    .lists .img{background: #c0c0c0;width: 78px;height: 78px;text-align: center;}
    .lists .del{float: right; margin-right: 10px; font-size: 26px; margin-top: 4px;}

    .control{position: absolute; width: 200px; height: 40px; bottom: -1px; left: 0px; background: #4e4949; opacity: 0.9; z-index: 2;color: white;color: white; font-size: 26px;text-indent: 10px;visibility: hidden;}
    .first:hover .control,.lists:hover .control{visibility: visible;}
</style>